
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 导入 bootstrap css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css"/>

    <script src="${pageContext.request.contextPath}/bootstrap-3.4.1-dist/js/jquery-3.3.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/confirm.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layer.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>

    <title>确认订单</title>
    <script type="text/javascript">

         window.onload=function () {

             var result=600;
             var interval=setInterval(sub,1000);
             function sub() {
                 if (result>1){
                     result=result-1;
                     var seconds = Math.floor(result % 60);     // 计算秒 ，取余
                     var minites = Math.floor((result / 60) % 60);
                     let minobj = document.getElementById("s1");
                     let secobj = document.getElementById("s2");
                     minobj.innerText=minites;
                     secobj.innerText=seconds;
                 }else{
                     alert("未在规定时间内支付，订单已失效！");
                     window.clearInterval(interval);
                     window.location.href="${pageContext.request.contextPath}/detail.jsp";
                 }
             }
         }


    </script>
</head>
<body>
    <!-- 头部导航 -->
    <!-- header -->

    <!-- =======================1.头部 =============-->
    <div class="layui-container header">
        <div class="layui-row ">
            <div class="layui-col-md3">
                <img src= "${pageContext.request.contextPath}/images/logo.png" alt="">
                <p class="logo_font">IRON电影</p>
            </div>
            <div class="layui-col-md5">
                <span class="layui-breadcrumb " lay-separator="  " >
                 <span class="layui-breadcrumb " lay-separator="  " >
                <a href="http://localhost:8080/demo/product">首页</a>
                  <a href="http://localhost:8080/demo/film">电影</a>
                <a href="https://www.bilibili.com/">体育</a>
                <a href="https://www.bilibili.com/">搞笑</a>
                <a href="https://www.bilibili.com/">视频</a>
                <a href="${pageContext.request.contextPath}/hot.jsp">热点</a>

                <a href="${pageContext.request.contextPath}/movie_rank.jsp">榜单</a>
                </span>
            </div>
            <div class="layui-col-md2">
                <div class="header_user">

                    <a href="${pageContext.request.contextPath}/personalCenter.jsp" id="header_myself"><span>个人中心</span></a>
                    <a href="${pageContext.request.contextPath}/personalCenter.jsp"> <img id="header_myself_logo" src="${pageContext.request.contextPath}/images/user.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>
 <div class="container">
  <div class="confirm" >
    <!-- 避免下面的块上移 -->
    <div class="header-m"></div>


    <div class="container" id="app" >

        <div class="count-down-wrapper">
            <div class="count-down" data-payleftseconds="839" id="remainTime">
                <p class="time-left">
                    请在
                    <span class="minute" id="s1">9</span>
                    分钟
                    <span class="second" id="s2">59</span>秒内完成支付
                </p>
                <p class="tip">超时订单会自动取消，如遇支付问题，请致客服：1010-5335</p>
            </div>
        </div>

        <p class="warning">请仔细核对订单信息</p>


        <table class="order-table">
                <thead>
                <tr>
                    <th>订单编号</th>
                    <th>商品名称</th>
                    <th>订单价格</th>

                </tr>
                </thead>
                <tbody>
                <tr name="orderNum" class="information">
                    <td class="movie-name" >${order.orderNumber}</td>
                    <td class="showtime" >${product.proName}</td>
                    <td class="cinema-name"  >${order.orderPrice}</td>
                </tr>
                </tbody>
            </table>


            <form class="form_info" method="post" action="${pageContext.request.contextPath}/goAlipay">
                <input type="hidden" name="custId" value="2">
                <input type="hidden" name="proId" value="${product.proId}">
                <input type="hidden" name="proName" value="${product.proName}">
                <input type="hidden" name="orderId" value="${order.orderId}">
                <input type="hidden" name="orderNumber" value="${order.orderNumber}">
                <input type="hidden" name="orderPrice" value="${order.orderPrice}">
                <input class="submitBtn" type="submit" value="前往支付宝进行支付" >
            </form>
        <div class="modal-container" style="display:none">
            <div class="modal">
                <span class="icon"></span>

                <p class="tip">支付超时，该订单已失效，请重新购买</p>

                <div class="ok-btn btn">我知道了</div>
            </div>
        </div>

    </div>
</div>
<script src="${pageContext.request.contextPath}/js/confirm.js"></script>
</div>
</body>
</html>
